<template>
	<view style="padding: 20rpx;min-height: 100vh;background: #f2f2f2;">
		<view  style="display: flex;justify-content: space-between;background: #fff;padding: 20rpx 20rpx;border-radius: 20rpx;margin-bottom: 15rpx;"
			v-for="(item,index) in list" :key="index" @click.stop="detailCurrent(item)">
			<view class="" style="display: flex;">
				<image :src="info.app.cdnurl+item.image" mode="widthFix"
					style="width: 180rpx;border-radius: 20rpx;height: 180rpx;">
				</image>
				<view class=""
					style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10rpx;">
					<view class="" style="font-size: 28rpx;">
						{{item.title}}
					</view>
					<view class="" style="font-size: 26rpx;" v-if="item.price">
						￥{{item.price[0]}}
					</view>
					<view class="" style="color: #ff3000;font-size: 24rpx;">
						预计佣金：￥{{item.commission}}
					</view>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: end;width: 250rpx;align-items: center;">
				<view class=""
					style="background: #e9b461;font-size: 26rpx;color: #fff;padding: 10rpx 25rpx;border-radius: 30rpx;"
					@click.stop="shares(item)">
					分享赚</view>
			</view>
		</view>
		<shareImages v-if="show" ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"
			:shareTitle="shareTitle" :goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl"
			@success="shareSuccess">
		</shareImages>
		<view class="" style="text-align: center;color: rgb(119, 119, 119);margin: 20rpx 0;font-size: 28rpx;">没有更多数据了
		</view>
		<tn-popup v-model="show" mode="bottom" :borderRadius="20">
			<view class="" style="padding: 50rpx 0 0 0;">
				<view
					style="display: flex;justify-content: space-around;border-bottom: 1rpx solid #e7e7e7;padding-bottom: 20rpx;">
					<button open-type="share" class=""
						style="display: flex;flex-direction: column;align-items: center;width: 50%;background: none;"
						@click="onShareByForward" v-if="info.platform.share.methods.includes('forward')">
						<image src="../../static/share_wx.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">微信好友
						</view>
					</button>
					<view class="" style="display: flex;flex-direction: column;align-items: center;width: 50%;"
						@click.stop="copy" v-if="info.platform.share.methods.includes('link')">
						<image src="../../static/share_link.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">复制链接
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: column;align-items: center;width: 50%;"
						v-if="info.platform.share.methods.includes('poster')" @click="createsShareImage">
						<image src="../../static/share_poster.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">生成海报</view>
					</view>
				</view>
				<view class="" style="text-align: center;color: #bbbbbb;font-size: 28rpx;padding: 20rpx 0;"
					@click="show=false">取消</view>
			</view>
		</tn-popup>
		<view v-if="qrCode == ''">
			<QRCode ref="qrcode" />
		</view>
		<canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId"
			class="tui-poster__canvas"></canvas>
		<tui-modal custom :show="modalShow" backgroundColor="transparent" padding="0" @cancel="hideModal">
			<view class="tui-poster__box" :style="{marginTop:height+'px'}">
				<image src="https://oss.taoding1688.com/static/uniapp/static/images/mall/icon_popup_closed.png"
					class="tui-close__img" @tap.stop="hideModal">
				</image>
				<image :src="posterImg" v-if="posterImg" class="tui-poster__img"></image>
				<tui-button type="danger" width="460rpx" height="80rpx" shape="circle"
					@click="savePic">保存图片</tui-button>
				<view class="tui-share__tips">保存图片到手机相册后，将图片分享到您的圈子</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import {
		shartInfo
	} from "@/util/share.js"
	import {
		getShopCommissionGoodsList,
		getWechatWxacode
	} from '@/apis/index.js'
	import shareImages from '@/components/hj-placard/shareImages.vue'
	const thorui = require('@/components/common/tui-clipboard/tui-clipboard.js');
	const poster = require('@/components/common/tui-poster/tui-poster.js');
	import QRCode from "@/components/qr_code/qrcode.vue"
	export default {
		components: {
			shareImages,
			QRCode
		},
		data() {
			return {
				qrCode: '', // 二维码
				show: false,
				list_rows: 8,
				page: 1,
				last_page: 1,
				list: [],
				item: {},
				canvasImages: '',
				canvasWidth: 375, // 宽度
				canvasHeight: 700, // 高度
				shareTitle: '我是这张图片的标题', // 分享标题
				goodsTitle: '我是这张图片的标题我是这张图片的标题我是这张图片的标', // 商品宣传标题
				shareImage: '../../static/bg.jpg', // 背景图片
				qrSize: 100, // 二维码大小
				qrUrl: '', // 生成二维码的链接
				shareDetail: {},
				winWidth: uni.upx2px(560 * 2),
				winHeight: uni.upx2px(890 * 2),
				detail: {},
				posterImg: '',
				modalShow: false,
				height: ''
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '推广商品'
			})
			this.getDataList()


		},
		onReachBottom() {
			if (this.last_page > this.page) {
				return
			} else {
				this.page++
				this.getDataList()
			}
		},
		mounted() {

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				let ress = shartInfo()

				return {
					title: this.info.app.name,
					path: `/templatePage/productDetail/productDetail?index=${ress.query}`,
					imageUrl: this.info.app.cdnurl + this.info.platform.share.forwardInfo.image,
				};
			}
		},
		methods: {
			hideModal() {
				this.modalShow = false;
			},
			savePic() {
				if (this.posterImg) {
					// #ifdef H5
					uni.previewImage({
						urls: [this.posterImg]
					});
					// #endif

					// #ifndef H5
					poster.saveImage(this.posterImg);
					// #endif

					this.hideModal();
				}
			},
			async createsShareImage() {
				this.show = false
				uni.showLoading({
					mask: true,
					title: '图片生成中...'
				});
				let str = this.info.app.cdnurl + this.detail.image
				let mainPic = await poster.getImage(str);
				// let qrcode = await poster.getImage('https://thorui.cn/extend/share/applets.png');
				// #ifdef MP-WEIXIN
				// await poster.removeSavedFile();
				// #endif
				if (mainPic && this.qrCode) {
					const imgs = {
						mainPic: mainPic,
						qrcode: this.qrCode
					};
					let text = this.detail.title;
					poster.drawGoodsPoster('posterId', this.winWidth, this.winHeight, imgs, text, this.detail.price[0],
						this.detail.original_price,
						'小程序',
						res => {
							uni.hideLoading();
							if (res) {
								this.posterImg = res;
								setTimeout(() => {
									this.modalShow = true;
								}, 60);
							} else {
								uni.showToast({
									title: '生成海报失败,请稍后再试',
									icon: 'none'
								})
							}
						});
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '生成海报图片下载失败,请稍后再试',
						icon: 'none'
					})
				}
			},
			poster() {
				this.modalShow = true;
				uni.showToast({
					title: '海报生成中，请稍后',
					icon: 'none'
				})
				setTimeout(() => {
					this.posterImg = 'https://www.tuikebao.com/static/images/mall/poster.png';
					this.modalShow = false;
					uni.showToast({
						title: '长按图片保存至相册',
						icon: 'none'
					})
				}, 1000);
			},
			shareSuccess(e) {
				this.canvasImages = e
			},
			shares(item) {
				let _this = this
				this.item = item
				this.detail = item
				this.show = true

				this.$nextTick(() => {
					let params = {
						query: this.item.id,
						page: 2
					}
					let res = shartInfo({
						params
					})
					let str = `/pages/index/index?${res.query}`
					let paths = {
						"path": str
					}
					const encodePath = encodeURIComponent(JSON.stringify(paths))
					let url =
						`https://oss.taoding1688.com/addons/shop/third.wechat/wxacode?platform=miniProgram&payload=${encodePath}`
					uni.downloadFile({
						url: url,
						success: (downloadRes) => {
							if (downloadRes.statusCode == 200) {
								const fs = uni.getFileSystemManager();
								this.qrCode=downloadRes.tempFilePath
							}
						},
						failure: (err) => {
							console.log('下载文件失败', err);
						}
					});
				})





			},
			copy() {
				let params = {
					query: this.item.id,
					page: 2
				}
				let res = shartInfo({
					params
				})
				// #ifndef H5
				uni.setClipboardData({
					data: res.link,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					},
				});
				// #endif
				// #ifdef H5
				var createInput = document.createElement('textarea');
				createInput.value = res.link;
				document.body.appendChild(createInput);
				createInput.select();
				document.execCommand('Copy');
				createInput.className = 'createInput';
				createInput.style.display = 'none';
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
				// #endif


			},
			detailCurrent(item) {
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`
				})

			},
			async getDataList() {
				let res = await getShopCommissionGoodsList(this.list_rows, this.page)
				if (res.code == 1) {
					this.list = [...this.list, ...res.data.data]
					this.last_page = res.data.last_page
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*海报modal弹层*/
	.tui-poster__canvas {
		background-color: #fff;
		position: absolute;
		left: -9999px;
	}

	.tui-poster__box {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tui-close__img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 0;
		top: -60rpx;
	}

	.tui-poster__img {
		width: 560rpx;
		height: 890rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.tui-share__tips {
		font-size: 24rpx;
		transform: scale(0.8);
		transform-origin: center center;
		color: #ffffff;
		padding-top: 12rpx;
	}
</style>